<template>
  <div class="editor">
    <el-row>
      <!--<el-col :span="4" style="position: fixed;height: 100%;">-->
      <!--<el-card class="box-card" style="background-color: #404040;height: 100%;">-->
      <!--<div style="display: flex;justify-content: center;align-items: center;margin-top: 20px;">-->
      <!--<el-button type="danger" style="width: 80%;color: #ffffff;border-radius: 50px;">回首页</el-button>-->
      <!--</div>-->
      <!--<div style="margin-top: 30px;margin-left: 10px;">-->
      <!--<el-link :underline="false" @click="createArticle"-->
      <!--style="margin-bottom: 15px;color: #ffffff;font-size: 15px;">-->
      <!--新建文集-->
      <!--</el-link>-->
      <!--<transition name="el-zoom-in-center">-->
      <!--<div v-show="showEditor" class="transition-box">-->
      <!--<el-input placeholder="请输入文集名" v-model="articleTitle"></el-input>-->
      <!--<el-button type="success" round plain size="mini"-->
      <!--style="margin-top: 15px;margin-bottom: 15px;">提交-->
      <!--</el-button>-->
      <!--<el-button @click="hideArticle" plain round size="mini">取消</el-button>-->
      <!--</div>-->
      <!--</transition>-->
      <!--</div>-->
      <!--<div-->
      <!--style="margin-top: 20px;display: flex;justify-content: space-between;height: 40px;align-items: center;"-->
      <!--class="editor-title">-->
      <!--<div>-->
      <!--<el-link :underline="false" style="font-size: 15px;color: #ffffff;margin-left: 10px;">日记本</el-link>-->
      <!--</div>-->
      <!--<div>-->
      <!--<icon-svg iconClass="setting"-->
      <!--style="width: 1.5em;height: 1.5em;color: #ffffff;margin-right: 20px;"></icon-svg>-->
      <!--</div>-->
      <!--</div>-->
      <!--<div style="bottom: 20px;height: auto;position: fixed;width: 15.5%;">-->
      <!--<div style="display: flex;justify-content: space-between;">-->
      <!--<div>-->
      <!--<icon-svg iconClass="config" style="width: 1em;height: 1em;color: #ffffff;"></icon-svg>-->
      <!--<el-link style="margin-left: 5px;">设置</el-link>-->
      <!--</div>-->
      <!--<div @click="showProblem = !showProblem">-->
      <!--<el-link style="margin-right: 5px;">遇到问题</el-link>-->
      <!--<icon-svg iconClass="problem" style="width: 1em;height: 1em;color: #ffffff;"></icon-svg>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
      <!--</el-card>-->
      <!--</el-col>-->
      <el-col :span="4">
        <el-card>
          <vue-3d-menu :title="'3D & 菜单'" :items="items"
          ></vue-3d-menu>
        </el-card>
      </el-col>
      <el-col :span="16">
        <Editor ref="froalaEditor" @open="init" @on-change="changeContent" v-model="content"></Editor>
      </el-col>
    </el-row>
    <el-collapse-transition>
      <div v-show="showProblem" class="editor-problem">
        <div>
          <div style="padding: 13px 16px;border-radius: 4px 4px 0 0;">
            <el-link style="font-size: 16px;" :underline="false">常见问题</el-link>
            <span @click="showProblem = !showProblem"
                  style="position: absolute;right: 0;top: 0;width: 48px;height: 48px;line-height: 46px;color: #000;transition:color .3s ease;cursor: pointer;">
              <icon-svg iconClass="cancel" style="width: 1em;height: 1em;color: #ffffff;margin-left: 10px;"></icon-svg>
            </span>
          </div>
          <div>
            <el-divider></el-divider>
          </div>
          <div style="font-size: 14px;padding: 10px 10px;line-height: 1.5;color: #595959;">
            如果你在使用编辑器的过程中遇到问题，可以尝试以下方案解决：
            <ul style="margin-top: 0;margin-bottom: 1em;">
              <li>Windows用户尽量将浏览器设置为极速模式，不要使用兼容模式写作</li>
              <li>推荐使用chrome浏览器，创作体验更加流畅</li>
              <li>浏览器插件可能与编辑器功能冲突，可以在使用编辑器时禁用插件</li>
            </ul>
          </div>
          <div>
            <el-divider></el-divider>
          </div>
          <div @click="showProblem = !showProblem"
               style="font-size: 16px;padding: 0 15px;text-align: center;color: #ec7259;cursor: pointer;line-height: 44px;">
            我知道了
          </div>
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>
<script>
  import Editor from '../components/editor.vue'
  import '../icons/setting.svg'
  import '../icons/config.svg'
  import '../icons/problem.svg'
  import '../icons/cancel.svg'

  export default {
    name: 'editor',
    components: {
      Editor
    },
    data () {
      return {
        publicPath: process.env.BASE_URL,
        content: '',
        direction: 'rtl',
        drawer: true,
        showEditor: false,
        articleTitle: '',
        showProblem: false,
        items: [{ title: '>_<#@!', click: () => alert('hello~') }]
      }
    },
    created () {
    },
    mounted () {
      // document.addEventListener('click', e => {
      //   if (!this.$el.contains(e.target)) {
      //     this.showProblem = false
      //   } else {
      //     this.showProblem = true
      //   }
      // })
    },
    watch: {},

    methods: {
      init () {
        this.$nextTick(() => {
          console.log(this.content)
          this.$refs.froalaEditor.setHtml(this.content)
        })
      },
      changeContent (html) {
        this.content = html
        console.log(html)
      },
      createArticle () {
        this.showEditor = true
      },
      hideArticle () {
        this.showEditor = false
        this.articleTitle = ''
      }
    }
  }
</script>

<style lang="scss">
  body {
    margin: 0 auto;
    padding: 0;
  }

  ul li {
    margin-top: 20px;
    list-style: none;
  }

  .box-card .el-card__body {
    padding: 5px !important;
  }

  .editor-title:hover {
    background-color: #666;
    border-left: 3px solid #F92A82;
  }

  .editor-problem {
    position: fixed;
    top: 15%;
    left: 0px;
    right: 0px;
    width: 320px;
    height: 360px;
    margin: 0 auto;
    background-color: #eee;
    z-index: 999;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .el-divider--horizontal {
    margin: 0 !important;
    height: 2px !important;
  }
</style>
